<template>
	<view class="">
		<view>
			<view>
				<image style="width: 100%;height: 300rpx;" :src="joinPinkInfo.goods_img"></image>
			</view>
			<view>
				<view style="text-align: center;font-size: 30rpx;" >已有{{joinPinkInfo.in_people}}人参团，还差{{people}}人</view>
				<view style="text-align: center;font-size: 30rpx;" >{{countdown}}后过期</view>
				<view class="progress-box">
					<progress :percent="percent" show-info active="true" active-mode="forwards" :stroke-width="10" backgroundColor="#F37B1D" />
				</view>
				<view style="text-align: center;font-size: 50rpx;" @tap="invitation(joinPinkInfo.pink_no)">邀请好友拼团</view>
			</view>
		</view>
		<view class="" style="margin-top: 20rpx;">
			<span style="text-align: center;font-size: 50rpx;">拼团记录</span>
			<view v-for="(item,index) in log">
				<view style="display: flex;justify-content: space-around;background-color: #F0AD4E;">
					<image style="width: 100rpx;height: 100rpx;" :src="item.avatar" mode=""></image>
					<span>{{item.nickname}}</span>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data: function() {
			return {
				pinkNo: '',
				joinPinkInfo: [],
				stop_time: 0,
				//还差多少人
				people: '',
				percent: 0, //百分比0~100
				h: 23, //时
				m: 59, //分
				s: 59, //秒
				countdown: '24:00:00', //倒计时
				timer: null, //重复执行
				log: []
			};
		},
		onLoad(option) {
			var pinkNo = 'pinK16308436754730';
			this.$http.get('pink/join/desc', {
				//传递参数
				pinkNo: option.pinkNo
			}, {}).then(res => {
				this.joinPinkInfo = res.data.data
				this.stop_time = res.data.data.stop_time;
				//计算拼团人数
				var pinkPeople = res.data.data.pink_people;
				var inPeople = res.data.data.in_people;
				var percent = (inPeople / pinkPeople) * 100;
				this.people = pinkPeople - inPeople;
				this.percent = percent;
				this.status = true
			});
			this.$http.get('pink/log', {
				//传递参数
				pinkNo: option.pinkNo
			}, {}).then(res => {
				this.log = res.data.data
			});
			this.timer = setInterval(() => {
				this.timeCount()
			}, 1000)
		},
		created() {

		},
		methods: {
			invitation(pink_no) {
				uni.navigateTo({
					url: '/pages/Activity/PinkInvitation/PinkInvitation?pink_no=' + pink_no
				})
			},
			timeCount() {
				--this.s;
				if (this.s < 0) {
					--this.m;
					this.s = 59;
				}
				if (this.m < 0) {
					--this.h;
					this.m = 59
				}
				if (this.h < 0) {
					this.s = 0;
					this.m = 0;
				}
				this.countdown = this.h + ":" + this.m + ":" + this.s
			},
		}
	};
</script>

<style scoped lang="scss">
	@import 'PinkGoodsStatus.scss';
</style>
